<template>
  <div class="box">
    <header class="header">
      <div class="left"><span @click="back" class="iconfont icon-zuo"></span></div>
      <div class="center">登录注册</div>
      <div class="right">
        <span class="iconfont icon-ziyuan"></span>
        <!-- <ul class="menu">
          <router-link to="/home" tag="li">
            <span class="iconfont icon-shouye"></span>
            <p>首页</p>
          </router-link>
          <router-link to="/kind" tag="li">
            <span class="iconfont icon-fenleisousuo"></span>
            <p>分类</p>
          </router-link>
          <router-link to="/cart" tag="li">
            <span class="iconfont icon-gouwuches"></span>
            <p>购物车</p>
          </router-link>
          <router-link to="/user" tag="li">
            <span class="iconfont icon-xiaolian"></span>
            <p>我的</p>
          </router-link>
        </ul> -->
      </div>
    </header>
    <div class="hualogo"><img src="https://img02.hua.com/m/login/wx_login_logo.png" /></div>
    <!-- -->
    <Ckmalogin v-if="loginStyle === 'ckma'" @my-event="getData"></Ckmalogin>
    <Pwdlogin v-else @my-event="getData"></Pwdlogin>
    <!-- -->
    <div class="quick">
      <div class="quick-tips">其他登录方式</div>
      <div class="quick-login">
        <div class="quick-login-item">
          <i class="iconfont icon-QQ"></i>
          <span>QQ</span>
        </div>
        <div class="quick-login-item">
          <i class="iconfont icon-zhifubao1"></i>
          <span>支付宝</span>
        </div>
        <div class="quick-login-item" @click="$router.push('/register')">
          <i class="iconfont icon-youxiang"></i>
          <span>邮箱注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Ckmalogin from '@/components/ckmalogin'
import Pwdlogin from '@/components/pwdlogin'
export default {
  data () {
    return {
      loginStyle: 'ckma'
    }
  },
  components: {
    Ckmalogin,
    Pwdlogin
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getData (val) {
      this.loginStyle = val
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.box {
  .header {
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding: {
      left: 20px;
      right: 20px;
    }
    .left,
    .right {
      font-weight: 600;
    }
    .right {
      position: relative;
      .menu {
        @include rect(3rem, 5rem);
        position: absolute;
        top: 30px;
        li {
          // @include rect(3rem, 1rem);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .hualogo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    img {
      @include rect(50%, 0.23rem);
    }
  }
  .quick {
    position: relative;
    border-top: 1px solid #eee;
    margin-top: 50px;
    .quick-tips {
      background-color: #fff;
      position: absolute;
      width: 150px;
      text-align: center;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .quick-login {
      padding: {
        top: 30px;
      };
      display: flex;
      justify-content: space-around;
      &-item {
        display: flex;
        align-items: center;
      }
      .iconfont {
        color: #1CACEA;
        font-size: 27px;
      }
      .icon-youxiang {
        font-size: 30px;
      }
    }
  }
}

</style>
